<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8"/>
  <title>birnbub</title>

  <!-- stylesheets -->

  <link rel="stylesheet" href="{{ STATIC_URL }}css/import.css" type="text/css"/>
  <link rel="stylesheet" href="{{ STATIC_URL }}css/custom.css" type="text/css"/>

  <!--[if lte IE 7]>
  <link rel="stylesheet" href="yaml/core/iehacks.min.css" type="text/css" />
  <![endif]-->


</head>

<body>
<header>
  <div class="ym-column linearize-level-1">
    <div class="ym-col1">
      <div class="ym-cbox">
        <div class="logoContainer">

          <img class="logo" src="/static/image/birnbub_logo_full_220px.png"/>
          <h6>Waldenburger Frische direkt vor's Haus</h6>
        </div>
      </div>
    </div>
    <div class="ym-col3 topRightInfoBox">

      <div class="ym-grid loginHeadline">
        <div class="ym-g40 ym-gl">
          <div class="ym-gbox">Angemeldet:</div>
        </div>
        <div class="ym-g60 ym-gl">
          <div class="ym-gbox">heiko.kundlacz@gmail.com</div>

        </div>


      </div>

      <!--
              <div class="ym-grid basketHeadline">
                <div class="ym-g20 ym-gl">
                  <div class="ym-gbox">Warenkorb</div>
                </div>
                <div class="ym-g60 ym-gl">
                  <div class="ym-gbox"></div>
                </div>
                <div class="ym-g20 ym-gl">
                  <div class="ym-gbox"><a href="#">Bezahlen</a></div>
                </div>
              </div>
              <div class="ym-grid">
                <div class="ym-g20 ym-gl">
                  <div class="ym-gbox">Artikel:</div>
                </div>
                <div class="ym-g60 ym-gl">
                  <div class="ym-gbox">6</div>
                </div>
                <div class="ym-g20 ym-gl">
                  <div class="ym-gbox"></div>
                </div>
              </div>
              <div class="ym-grid">
                <div class="ym-g20 ym-gl">
                  <div class="ym-gbox">Einkaufswert:</div>
                </div>
                <div class="ym-g60 ym-gl">
                  <div class="ym-gbox">125.44 sfr.</div>
                </div>
                <div class="ym-g20 ym-gl">
                  <div class="ym-gbox"></div>
                </div>
              </div>
               -->
    </div>
  </div>

</header>
<nav id="nav">
  <div class="ym-hlist">
    <ul>
      {% for division in divisionList %}
        <li>
          <div class="listHead {{ division.name }}DivisionColor">
          </div>
          <div class="listEntry">
            <a class="toggleFruit" href="#">Früchte</a>
          </div>
        </li>
      {% endfor %}
      <li>
        <div class="listHead fruitColor">
        </div>
        <div class="listEntry">
          <a class="toggleFruit" href="#">Früchte</a>
        </div>
      </li>

      <li>
        <div class="listHead vegetableColor">
        </div>
        <div class="listEntry">
          <a class="toggleVegetable" href="#">Gemüse</a>
        </div>
      </li>
      <li>
        <div class="listHead animalColor">
        </div>
        <div class="listEntry">
          <a class="toggleAnimal" href="#">Tierisches</a>
        </div>
      </li>
      <li>
        <div class="listHead glasColor">
        </div>
        <div class="listEntry">
          <a class="toggleGlas" href="#">Im Glas</a>
        </div>
      </li>
    </ul>
    <ul>
      <li>
      <li>
        <div class="listHead generalColor">
        </div>
        <div class="listEntry">
          <a class="toggleGlas" href="#">NEUES</a>
        </div>
      </li>
        <div class="linkGeneralHorizontal">VERANSTALTUNGEN</div>
        <div class="linkGeneralHorizontal">KONTAKT</div>
      </li>
    </ul>
    <form class="ym-searchform">
      <input class="ym-searchfield" type="search" placeholder="Search..."/>
      <input class="ym-searchbutton" type="submit" value="Search"/>
    </form>
  </div>
</nav>

<div id="main">
  <div class="ym-column linearize-level-1">
    <div class="ym-col1">
      <div class="ym-cbox">
        {% block main %}
          <section class="box info">
            <h2>Main Content</h2>

            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
              et dolore
              magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
              clita kasd gubergren,
              no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing
              elitr, sed diam
              nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et
              accusam et justo
              duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
              amet.</p>
            <a class="ym-button ym-next" href="#">Read More</a>
          </section>
        {% endblock main %} {% block bottomBlocks %}
        <section class="ym-grid linearize-level-2">
          <article class="ym-g50 ym-gl">
            <div class="ym-gbox">
              <!-- content -->
              <h3>Heading</h3>

              <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
                labore et dolore
                magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
                clita kasd
                gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
                consetetur sadipscing
                elitr.</p>
            </div>
          </article>
          <article class="ym-g50 ym-gr">
            <div class="ym-gbox">
              <!-- content -->
              <h3>Heading</h3>

              <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
                labore et dolore
                magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
                clita kasd
                gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
                consetetur sadipscing
                elitr.</p>
            </div>
          </article>
        </section>
        <section class="ym-grid linearize-level-2">
          <article class="ym-g50 ym-gl">
            <div class="ym-gbox">
              <!-- content -->
              <h3>Heading</h3>

              <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
                labore et dolore
                magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
                clita kasd
                gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
                consetetur sadipscing
                elitr.</p>
            </div>
          </article>
          <article class="ym-g50 ym-gr">
            <div class="ym-gbox">
              <!-- content -->
              <h3>Heading</h3>

              <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
                labore et dolore
                magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
                clita kasd
                gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
                consetetur sadipscing
                elitr.</p>
            </div>
          </article>
        </section>
      {% endblock bottomBlocks %}
      </div>
    </div>
    <aside class="ym-col3">

      {% block sidebar %}
        <h1>This is the super template</h1>
      {% endblock sidebar %}

    </aside>
  </div>
</div>
<div class="sitePager">
  Sample Site Pager

</div>
<footer>
  <p>
    © Company 2012 &ndash; Layout based on <a href="http://www.yaml.de">YAML</a>
  </p>
</footer>

</body>
</html>